<script setup>
import {
    Edit,
    Delete,
    Search
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import {getPageService,getInfo,deleteteacher} from '@/api/adm/teacher.js'
import {getDeptListService} from '@/api/adm/student.js' 
//导入消息框
import {ElMessage,ElMessageBox} from 'element-plus'
//分页条数据模型
const currentPage = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(6)//每页条数
const loading = ref(true)
//院系ID
const checkDeptID=ref()
//院系下拉框
const deptList=ref([])

//模糊条件
const keyWord=ref()
//
const teacherPage=ref()
const getTeacherPage = async () => {
    const model = {
        currentPage: currentPage.value?currentPage.value:1,
        pageSize: pageSize.value?pageSize.value:1,
        deptID:checkDeptID.value?checkDeptID.value:null,
        keyword:keyWord.value?keyWord.value:null
    }
    let result= await getPageService(model);
    teacherPage.value = result.data.records;
    total.value=result.data.total;
    loading.value=false
}
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getTeacherPage()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    currentPage.value = num
    getTeacherPage()
}
const getDeptList = async ()=>{
    let result = await getDeptListService();
    deptList.value=result.data
    checkDeptID.value=deptList.value[0].deptID
}
// const teacherInfo=ref()

const getteacherInfo = async (row)=>{
    let result= await getInfo(row.teacherID)
    teacherInfo=result.data
}
getDeptList()
getTeacherPage()
const checkedDeptID=()=>{
    
    getTeacherPage()
}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span><strong>教师基本信息</strong></span>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="学院"style="width: 200px;">
                <el-select v-model="checkDeptID" class="m-2" placeholder="全部"  @change="checkedDeptID">
                <el-option
                        v-for="item in deptList"
                        :value="item.deptID"
                        :key="item.deptID"
                        :label="(item.deptID?item.deptID+'|':'')+item.deptName"
                />
            </el-select>
            </el-form-item>
            <el-form-item label="教师名(模糊查询)">
                <el-input placeholder="请输入教师名" v-model="keyWord" :suffix-icon="Search" @input="getTeacherPage()"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"@click="getTeacherPage()">搜索</el-button>
                <el-button @click="keyWord='',checkDeptID=null,checkDeptID=null,getTeacherPage()">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 学生列表 -->
        <el-table  v-loading="loading"
                element-loading-text="Loading..."
                :element-loading-spinner="svg"
                element-loading-svg-view-box="-10, -10, 50, 50"
                :data="teacherPage" style="width: 100%">
                <el-table-column type="index" width="55" label="序号"/>
            <el-table-column label="教职工号" prop="teacherID"></el-table-column>
            <el-table-column label="姓名" prop="teacherName"show-overflow-tooltip></el-table-column>
            <el-table-column label="所属院系" prop="deptName"width="200%"show-overflow-tooltip></el-table-column>
            <el-table-column label="性别" prop="teacherSex"show-overflow-tooltip></el-table-column>
            <el-table-column label="联系电话" prop="phoneNumber"width="200"show-overflow-tooltip></el-table-column>
            <el-table-column label="入职日期" prop="enteryDate"width="200"show-overflow-tooltip></el-table-column>
            <!-- <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click=getteacherInfo(row)></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click=deleteteacher(row)></el-button>
                </template>
            </el-table-column> -->
            <template #empty>
                <el-empty description="未查找到数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6, 8 ,10]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>